<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>

    <title>Acced Form</title>

    <link rel="stylesheet" th:href="@{/login/bootstrap.min.css}">
    <script th:src="@{/login/jquery.min.js}"></script>
    <script th:src="@{/login/bootstrap.min.js}"></script>

    <link th:href="@{/login/style.css}" rel="stylesheet" type="text/css"/>

</head>
<body>

<div class="login">
    <h2 th:text="#{login.tip}">Acced Form</h2>
    <div class="login-top">
        <h1 th:text="#{login.top}">LOGIN FORM</h1>
        <form  action="login.do" method="post">
            <div class="form-group">
                <input type="text" name="name" placeholder="Username" th:placeholder="#{login.username}" v-model="name" required
                       oninvalid="setCustomValidity('用户名不能为空！')" oninput="setCustomValidity('')"
                       onfocus="this.value = '';"
                       onblur="if (this.placeholder == '') {this.placeholder = '用户名';}">
            </div>
            <div class="form-group">
                <input type="password" name="pass" placeholder="******" v-model="pass" required
                       oninvalid="setCustomValidity('密码不能为空！')" oninput="setCustomValidity('')"
                       onfocus="this.value = '';"
                       onblur="if (this.placeholder == '') {this.placeholder = '******';}">
            </div>
            <div class="form-group">
            <img id="num" style="margin-left: 110px;width: 100px" th:src="@{/code}" onclick="document.getElementById('num').src = '/code?'+(new Date()).getTime()"/>
            <input type="text" name="code" v-model="code" required
                   oninvalid="setCustomValidity('验证码不能为空！')" oninput="setCustomValidity('')"
                   onfocus="this.value = '';"
                   onblur="if (this.placeholder == '') {this.placeholder = '******';}">
            </div>
            <div class="forgot">
                <button type="submit" th:text="#{login.login}" value="Login"/>
                <a href="#">|</a>
                <a data-toggle="modal" data-target="#register" th:text="#{login.register}">New User Register</a>
            </div>
        </form>
    </div>

    <div class="login-bottom">
        <!--<h3>New User &nbsp;<a href="#">Register</a>&nbsp Here</h3>-->
        <a href="#" th:href="@{/login.html(l='zh_CN')}">中文</a>
        <a href="#">|</a>
        <a href="#" th:href="@{/login.html(l='en_US')}">English</a>
    </div>

</div>

<!-- 注册窗口 -->
<div id="register" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <button class="close" data-dismiss="modal">
                    <span>×</span>
                </button>
            </div>
            <div class="modal-title">
                <h1 class="text-center">注册界面</h1>
            </div>
            <div class="modal-body">
                <form action="user/register.do" method="post">
                    <div class="form-group">
                        <label>用户名</label>
                        <input class="form-control" type="text" name="name" v-model="name" placeholder="请输入用户名！" required
                               oninvalid="setCustomValidity('用户名不能为空！')" oninput="setCustomValidity('')"
                               onfocus="this.value = '';"
                               onblur="if (this.placeholder == '') {this.placeholder = '用户名';}">
                    </div>
                    <div class="form-group">
                        <label>密码</label>
                        <input class="form-control" type="password" name="pass" v-model="pass" placeholder="请输入密码！" required
                               oninvalid="setCustomValidity('密码不能为空！')" oninput="setCustomValidity('')"
                               onfocus="this.value = '';"
                               onblur="if (this.placeholder == '') {this.placeholder = '******';}">
                    </div>
                    <div class="form-group">
                        <label>备注</label>
                        <input class="form-control" type="text" name="beizhu" v-model="beizhu" placeholder="请输入备注！" required
                               oninvalid="setCustomValidity('备注不能为空！')" oninput="setCustomValidity('')"
                               onfocus="this.value = '';"
                               onblur="if (this.placeholder == '') {this.placeholder = '备注';}">
                    </div>
                    <div class="text-right">
                        <button class="btn btn-primary" type="submit">提交</button>
                        <button class="btn btn-danger" data-dismiss="modal">取消</button>
                    </div>
                    <!--<a href="" data-toggle="modal" data-dismiss="modal" data-target="#login">已有账号？点我登录</a>-->
                </form>
            </div>
            <div class="login-bottom">
                <!--<h3>New User &nbsp;<a href="#">Register</a>&nbsp Here</h3>-->
                <a data-toggle="modal" data-target="#register" href="">中文</a>
                <a href="#">|</a>
                <a data-toggle="modal" data-target="#register2" href="">English</a>
            </div>
        </div>
    </div>
</div>
<!-- 注册窗口 -->
<div id="register2" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <button class="close" data-dismiss="modal">
                    <span>×</span>
                </button>
            </div>
            <div class="modal-title">
                <h1 class="text-center">Register Form</h1>
            </div>
            <div class="modal-body">
                <form action="user/register.do">
                    <div class="form-group">
                        <label>UserName</label>
                        <input class="form-control" type="text" placeholder="Please enter username！" v-model="name" name="name" required
                               oninvalid="setCustomValidity('用户名不能为空！')" oninput="setCustomValidity('')"
                               onfocus="this.value = '';"
                               onblur="if (this.placeholder == '') {this.placeholder = 'UserName';}">
                    </div>
                    <div class="form-group">
                        <label>PassWord</label>
                        <input class="form-control" type="password" placeholder="Please enter password！" v-model="pass" name="pass" required
                               oninvalid="setCustomValidity('密码不能为空！')" oninput="setCustomValidity('')"
                               onfocus="this.value = '';"
                               onblur="if (this.placeholder == '') {this.placeholder = '******';}">
                    </div>
                    <div class="form-group">
                        <label>permission</label>
                        <input class="form-control" type="password" placeholder="Please enter permission！" v-model="beizhu" name="beizhu" required
                               oninvalid="setCustomValidity('备注不能为空！')" oninput="setCustomValidity('')"
                               onfocus="this.value = '';"
                               onblur="if (this.placeholder == '') {this.placeholder = 'BeiZhu';}">
                    </div>
                    <div class="text-right">
                        <button class="btn btn-primary" type="submit">Submit</button>
                        <button class="btn btn-danger" data-dismiss="modal">Cancel</button>
                    </div>
                </form>
            </div>

        </div>
    </div>
</div>
<script th:src="@{/myjs/login/main.js}"></script>

</body>

</html>